Interesting HTML tags
I am going to show you the top 9 interesting HTML tags and attributes. In this article, you will research short examples and tricks with HTML.
I notice, developers make some components instead of using native HTML tags. Hope, this article will help to save time and resources for your project.
Native HTML tags or attributes for the:
1. Progress bar
2. Expansion panel (accordion)
3. Dialog
4. Color selection
5. Base url
6. Lazy loading
7. Calendar
8. Single range
9. Content editable
- The example of how you can add a progress bar to your web app without using additional libraries.
<progress value="32" max="100"> 32% </progress>
2. The example of how you can add expansion panel (accordion) to your web app.
<details>
<summary>Global Goals</summary>
<p>The Global Goals are a set of 17 commitments made by 193 world leaders, to end extreme poverty, inequality, and climate change by 2030..</p>
</details>
3. The semantic way of adding a dialog to your website. But in my opinion, the native HTML element loses out to the ready-made components from UI libraries.
<dialog open>
<p>Greetings, one and all!</p>
<button>Close</button>
</dialog>
4. A native HTML tag for color selection.
<input type="color">
5. The <base> HTML tag specifies the base URL for all URLs in a document.
<base href="https://leonid-shvab.web.app/">
<a href="contacts">contacts</a>
<a href="blog/000">blog</a>
6. A native implementation of lazy loading. Just add the loading=”lazy” attribute and watch as the images load one by one in the network. This functionality has weak compatibility with browsers. But for the future, it is a great solution for lazy loading.
<img loading="lazy" src="1.jpg" height="400px" width="400px">
<img loading="lazy" src="2.jpg" height="400px" width="400px">
<img loading="lazy" src="3.jpg" height="400px" width="400px">
7. A native HTML tag for the calendar.
<input type="date">
8. A native HTML tag for the single range.
<input type="range" min="0" max="50">
9. An interesting atribute, which allows edit a block of text.
<p contenteditable="true">
You can edit this block of text.
</p>
Contacts:
1) Linkedin
2) Github
3) Landing page